<template>
  <view class="container" v-if="Object.values(obj).length != 0">
    <!-- 学生信息 -->
    <view class="userinfo">
      <image :src="imgUrl + obj.avatar" mode="aspectFill" style="width: 100rpx; height: 100rpx; border-radius: 100rpx 100rpx 100rpx 100rpx"></image>
      <view class="right">
        <view class="name">
          <view style="display: flex">
            <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">{{ obj.username }}</view>
            <image src="../../static/icon/nv.png" mode="" style="width: 42rpx; height: 42rpx"></image>
            <view class="school" v-if="obj.school != ''">{{ obj.school }}</view>
          </view>
          <view style="display: flex">
            <view v-if="isshow" style="width: 150rpx; height: 50rpx; text-align: center; line-height: 50rpx; font-size: 26rpx; background-color: #fff" @click="lahei">
              {{ blackswiach ? '拉黑' : '取消拉黑' }}
            </view>
            <view @click="isshow = !isshow">...</view>
          </view>
        </view>
        <view class="subject">{{ obj.grade_name + ' | ' + obj.subject_name }}</view>
      </view>
    </view>

    <!-- 学生地址 -->
    <view class="place">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin-bottom: 16rpx">
        <text>{{ obj.address_name }}</text>
        <text style="padding-left: 30rpx">{{ obj.address_mobile }}</text>
      </view>
      <view style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">{{ obj.address_detail }}</view>
    </view>

    <!-- 科目 -->
    <view class="subjectbox">
      <view style="display: flex; justify-content: space-between; align-items: center">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">科目选择</view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">{{ obj.grade_name + ' | ' + obj.subject_name }}</view>
      </view>
      <view style="display: flex; justify-content: space-between; align-items: center; margin-top: 30rpx">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">购买课时</view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">已购{{ obj.period_num }}课时</view>
      </view>
    </view>
    <!-- 未预约时间 -->
    <view class="yuyuebox" v-if="obj.name_week == ''">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">暂无预约上课时间</view>
    </view>
    <!-- 已预约时间 -->
    <view class="yuyuebox" v-else>
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">已预约上课时间</view>
      <view style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; margin-top: 16rpx">{{ obj.name_week }}</view>
      <!-- 周几 -->
      <view style="display: flex; align-items: center; margin-top: 30rpx; margin-bottom: 26rpx">
        <view :class="{ common: true, act: actindex == index }" v-for="(item, index) in obj.teacherSetup" :key="index" @click="actindex = index">{{ item.name }}</view>
      </view>
      <!-- 时间段 -->
      <view style="display: flex">
        <view class="yuyueitem" v-for="item in obj.teacherSetup[actindex].list" :key="item.id">
          <view>
            {{
              item.status == 1
                ? '可预约'
                : item.status == 2 && item.user_cancel == 2
                ? '已预约'
                : item.status == 2 && item.user_cancel == 3
                ? '已取消预约'
                : item.status == 2 && item.user_cancel == 0
                ? '已预约'
                : '可预约'
            }}
          </view>
          <view>{{ item.time_slot }}</view>
        </view>
      </view>
      <!-- 剩余课时 -->
      <view style="font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333; margin-top: 20rpx">剩余可预约 {{ obj.can }}课时</view>
    </view>

    <!-- 拒接接单，接单 -->
    <view class="btngroup">
      <view class="refuse" @click="jujue">拒绝接单</view>
      <view class="agree" @click="jiedan">立即接单</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: '', // 配置图片基地址
      actindex: 0,
      isshow: false,
      obj: {}, // 详情信息
      orderid: '', // 订单id
      blackswiach: true
    };
  },
  methods: {
    // 拉黑学生
    async lahei() {
      this.blackswiach = !this.blackswiach;
      const res = await uni.$http.post('/black/add', {
        type: '2',
        black_people: this.obj.user_id
      });
      if (res.data.code == 1) {
        return uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
      }
    },
    //获取订单详情
    async getorderdetail(id) {
      const res = await uni.$http.post('/teacher_order/details', {
        order_id: id
      });
      console.log('订单的详情信息', res.data.data);
      this.obj = res.data.data;
    },
    // 拒绝接单
    jujue() {
      uni.$http
        .post('/teacher_order/refuseOrder', {
          order_id: this.orderid
        })
        .then((res) => {
          console.log('拒绝接单', res);
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          });
        });
    },
    // 立即接单
    jiedan() {
      uni.$http
        .post('/teacher_order/takingOrder', {
          order_id: this.orderid
        })
        .then((res) => {
          console.log('立即接单', res);
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          });
        });
    }
  },
  onLoad(e) {
    // 配置图片基地址
    this.imgUrl = this.imgurl;
    if (e.id) {
      console.log(e.id);
      this.orderid = e.id;
      this.getorderdetail(this.orderid);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .userinfo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 20rpx;
    width: 710rpx;
    height: 164rpx;
    padding: 30rpx;
    background: #f1f3ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .right {
      margin-left: 20rpx;
      flex: 1;
      .name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14rpx;
        .school {
          font-size: 22rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          width: 172rpx;
          height: 40rpx;
          background: #eaedfd;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          color: #3553e8;
          text-align: center;
          line-height: 40rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .subject {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
      }
    }
  }
  .place {
    box-sizing: border-box;
    width: 710rpx;
    height: 160rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 20rpx 20rpx 20rpx;
    padding: 30rpx;
    border: 2rpx solid #f1f1f1;
  }
  .subjectbox {
    box-sizing: border-box;
    width: 710rpx;
    height: 180rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 20rpx;
    padding: 30rpx;
    border: 2rpx solid #f1f1f1;
  }
  .yuyuebox {
    box-sizing: border-box;
    width: 710rpx;
    height: 434rpx;
    margin: 20rpx;
    padding: 30rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    .common {
      width: 102rpx;
      height: 62rpx;
      font-size: 28rpx;
      text-align: center;
      line-height: 62rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .act {
      background: #ecefff;
      color: #3553e8;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
    }
    .yuyueitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 160rpx;
      height: 110rpx;
      background: #ffffff;
      margin-right: 4rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #333333;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 2rpx solid #f1f1f1;
    }
  }
  .btngroup {
    box-sizing: border-box;
    padding: 20rpx;
    display: flex;
    .refuse {
      width: 350rpx;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      color: #000;
      background-color: #f1f1f1;
      margin-right: 10rpx;
      border-radius: 100rpx;
    }
    .agree {
      width: 350rpx;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      color: #fff;
      background-color: #3553e8;
      border-radius: 100rpx;
    }
  }
}
</style>
